<template>
  <div :id="elId" style="width: 90%; height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts'
//引入uuid文件
import uuidv1 from 'uuid/v1'
export default {
  name: 'LineCharts',
  data() {
    return {
      elId: ''
    }
  },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 横轴
    xAxisData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 纵轴单位
    yAxisUnit: {
      type: String,
      default: ''
    },
    visualMap: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 顶部图例
    legend: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 默认展示的图例，空数组=全部展示
    showLegendArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 数据源
    seriesData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 添加线
    addLine: {
      type: Boolean,
      default: false
    },
    // 线样式
    lineStyle: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 添加区域
    addArea: {
      type: Boolean,
      default: false
    },
    // 区域样式、范围
    areaStyle: {
      type: Object,
      default: () => {
        return {
          color: '#F2F2F2',
          data: [4.4, 10] // 范围值
        }
      }
    }
  },
  computed: {
    formatLegend() {
      if (this.legend) {
        let legendSelect = {}
        if (this.showLegendArr && this.showLegendArr.length === 0) {
          this.legend.forEach(el => {
            legendSelect[el] = true
          })
        } else if (this.showLegendArr && this.showLegendArr.length > 0) {
          this.legend.forEach((el, index) => {
            if (this.showLegendArr.includes(index)) {
              legendSelect[el] = true
            } else {
              legendSelect[el] = false
            }
          })
        }
        return {
          data: this.legend,
          selected: legendSelect
        }
      } else {
        return { data: this.legend }
      }
    },
    formatSeriesData() {
      if (this.legend) {
        let seriesData = []
        this.legend.forEach((el, index) => {
          let data = {
            connectNulls: true,
            type: 'line',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          }

          data.name = el
          data.data = this.seriesData[index]

          if (this.addArea) {
            let markArea = this.makeMarkArea()
            data.markArea = markArea
          }

          if (this.addLine) {
            let markLine = this.makeMarkLine(index)
            data.markLine = markLine
          }

          seriesData.push(data)
        })
        return seriesData
      } else {
        return []
      }
    }
  },
  created() {
    this.elId = uuidv1() //获取随机id
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.elId))
    // 绘制图表
    const options = {
      title: {
        text: this.title
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: 'rgba(255,255,255,0)'
          }
        }
      },
      grid: {
        left: '15%'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.xAxisData,
        position: 'bottom'
      },
      yAxis: [
        {
          type: 'value',
          boundaryGap: [0, '50%'],
          axisLabel: {
            formatter: '{value}' + this.yAxisUnit
          }
        }
      ],
      calculable: true,
      legend: this.formatLegend,
      series: this.formatSeriesData
    }

    let chartsOptions = options
    if (JSON.stringify(this.visualMap) != '{}') chartsOptions = Object.assign(options, { visualMap: this.visualMap })

    myChart.setOption(chartsOptions)
  },
  methods: {
    makeMarkArea() {
      let markArea = {
        silent: true,
        itemStyle: {
          color: this.areaStyle.color
        }
      }
      let markAreaData = []
      this.areaStyle.data.forEach(el => {
        markAreaData.push({ yAxis: el })
      })
      markArea = Object.assign(markArea, { data: [markAreaData] })
      return markArea
    },
    makeMarkLine(index) {
      const dataIndex = this.lineStyle.findIndex(item => {
        return item.index === index
      })
      if (dataIndex < 0) {
        return {}
      } else {
        let markLine = {
          silent: false, //鼠标悬停事件
          symbol: 'none',
          lineStyle: {
            color: this.lineStyle[dataIndex].lineColor
          },
          label: {
            textStyle: {
              color: this.lineStyle[dataIndex].textColor
            }
          }
        }
        let markLineData = []
        this.lineStyle[dataIndex].data.forEach(el => {
          markLineData.push({ yAxis: el })
        })
        markLine = Object.assign(markLine, { data: markLineData })
        return markLine
      }
    }
  }
}
</script>

